import './App.css';
// import { Routes } from 'react-router-dom';
// 6.把路由对象拿过来， 7.使用RouterProvider组件包裹 8.前往main.js页面
import router from './router';
import { RouterProvider } from 'react-router-dom';
import { useSelector } from 'react-redux';
import routes from './router';
import { createBrowserRouter, Navigate } from "react-router-dom";
// 3.引入对应的组件
import Main from './pages/main'
import Home from './pages/home'
import { mapRouter } from "./router/mapMethod";


function App() {
  let routesArr = useSelector((state) => {
    return state.routerReducer.userRoute
  })
  // console.log(routesArr,'routerArr');
  let defaultList = [
    {
      path: '/',
      element: <Navigate to='/home' replace />
    },
    {
      path: 'home',
      Component: Home
    }
  ]
  let children = defaultList.concat(mapRouter(routesArr))
  routes.push({
    path: '/',
    Component: Main,
    children: children
  })
  // 使用 createBrowserRouter 创建路由对象, 传入路由的配置
  let routeList = createBrowserRouter(routes)



  return (
    <div className="App">
      {/* <Routes>
      </Routes> */}
      <RouterProvider router={routeList}></RouterProvider>

    </div>
  );
}

export default App;
